<template>
	<view class="px-4">
		<view class="flex border-bottom border-main align-center mt-4" style="padding: 16rpx 0;">
			<image src="../../static/img/ic_login_password.png" class="mr-4" style="height: 55rpx;width:46rpx;" mode=""></image>
			<input type="tel" @input="inputValue" :value="tel" focus class="font30"  placeholder="请输入手机号" />
		</view>
		<view class="flex border-bottom border-main align-center mt-4 justify-between" style="padding: 16rpx 0;">
			<view class="flex align-center">
				<image src="../../static/img/ic_login_password.png" class="mr-4" style="height: 55rpx;width:46rpx;" mode=""></image>
				<input type="code" @input="code" focus class="font30" value="" placeholder="请输入验证码" />
			</view>
			<text v-if="send" class="px-2 py-1 rounded-circle colorfff bg-danger text-center" style="width: 250rpx;">{{ second }}秒后重新发送</text>
			<text v-else class="colorfff px-2 py-1 rounded-circle bg-main  text-center" style="width: 250rpx;" @click="getCode">发送验证码</text>
		</view>
		<view class="flex border-bottom border-main align-center mt-4" style="padding: 16rpx 0;">
			<image src="../../static/img/ic_login_password.png" class="mr-4" style="height: 55rpx;width:46rpx;" mode=""></image>
			<input type="password" @input="againInput" focus class="font30" value="" placeholder="请重新输入新密码" />
		</view>
		<view class="px-2 mt-5"><main-button @click="sumitLogin">确定</main-button></view>
	</view>
</template>

<script>
import mainButton from '../../components/common/main-buttom.vue';
export default {
	data() {
		return {
			tel: '',
			codeNum: '',
			password: '',
			send: false,
			second: 60
		};
	},
	components: { mainButton },
	onLoad() {
	},
	methods: {
		getCode: function() {
			this.send = true;
			this.second = 60;
			this.httpgetCode();
			var interval = setInterval(() => {
				--this.second;
			}, 1000);
			setTimeout(() => {
				clearInterval(interval);
				this.send = false;
			}, 60000);
		},
		httpgetCode() {
			let this_ = this;
			let opts = {
				url: 'SendYzm.shtml'
			};

			let param = {
				phone_number: this.tel,
				type: 2
			};
			this_.$http.httpRequest(opts, param).then(
				res => {
					console.log(res.data);
				},
				error => {
					console.log(error);
				}
			);
		},
		inputValue(event) {
			this.tel = event.target.value;
		},
		code(event) {
			this.codeNum = event.target.value;
		},
		againInput(event) {
			this.password = event.target.value;
		},
		sumitLogin() {
			let this_ = this;
			let opts = {
				url: 'ForgetPwd.shtml'
			};
			let param = {
				vcType: 2,
				phone_number: this_.tel,
				phone_code:this_.codeNum,
				password: this_.password
			};
			this_.$http.httpRequest(opts, param).then(
				res => {
					console.log(res.data);
					if (res.data.code == '200') {
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						});
						uni.navigateBack({
							delta:1
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				},
				error => {
					console.log(error);
				}
			);
		}
	}
};
</script>

<style></style>
